<template>
	<u-sticky bgColor="#F5F6F8">
		<view class="tabs">
			<u-tabs itemStyle="height: 100rpx;width: 33%;font-size: 30rpx;'" lineColor="#5780EF"
				activeStyle="color: #5780EF;" inactiveStyle="color: #606672;" :current="current" :list="tabsList"
				@click="tabsChange"></u-tabs>
		</view>
	</u-sticky>
	
	<view class="order-list">
		<view class="order-item" v-for="(item, i) in 10" :key="i" @tap="goOrderDetail">
			<view class="status-box">
				<view class="name">易小博</view>
				<view class="status" style="display: flex;align-items: center;">
					<text>待支付：</text>
					<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
				</view>
				<!-- <view class="status">待就诊</view> -->
				<!-- <view class="status1">已完成</view> -->
			</view>
			<view class="content-box">
				<view class="icon">
					<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
				</view>
				<view class="content-item">医院：翊博门诊</view>
				<view class="content-item">科室：心脑血管科</view>
				<view class="content-item">医生：李医生</view>
				<view class="content-item">就诊日期：2023-11-16  15:00-17:00</view>
				<view class="content-item">已超时：请退号后重新预约</view>
			</view>
			<view class="btns-box">
				<view class="message">请在就诊当天前往医院就诊</view>
				<view class="">
					<u-button throttleTime="1000" :customStyle="{height: '56rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">去支付</u-button>
					<!-- <u-button throttleTime="1000" :customStyle="{height: '56rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">退号</u-button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const current = ref(0)
	const tabsList = ref([{
			name: '全部'
		},
		{
			name: '待支付'
		},
		{
			name: '待就诊'
		},
	])
	const tabsChange = (e) => {
		current.value = e.index
	}
	const goOrderDetail = () => {
		uni.navigateTo({
			url: '/mine/order/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.order-list {
		margin-top: 40rpx;
		padding: 0 26rpx 150rpx;
		.order-item {
			padding: 38rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 26rpx;
			.status-box {
				@include between(100%);
				padding-bottom: 32rpx;
				border-bottom : 1rpx solid #E8E8E8;
				margin-bottom: 30rpx;
				.name {
					color: #312C2A;
				}
				.status {
					color: #5780EF;
				}
				.status1 {
					color: #AAAAAA;
				}
			}
			.content-box {
				width: 100%;
				position: relative;
				font-size: 26rpx;
				color: #606672;
				.content-item {
					margin-bottom: 20rpx;
				}
				.icon {
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 99;
				}
			}
			.btns-box {
				padding-top: 32rpx;
				border-top: 1rpx solid #E8E8E8;
				margin-top: 30rpx;
				@include between(100%);
				.message {
					font-size: 26rpx;
					color: #5780EF;
				}
			}
		}
	}
</style>